H T M L   -   Hyper Text Markup Language

8.  hyperlinks

8.5  map-tag - image-map

Das map-tag ist ein tag, in das area-tags geschachtelt werden. Mit einem area-tag definiert man in einer grafik einen sog. hotspot, das ist eine teilflächen der grafik, die mit einem link verknüpft ist. Das area-tag hat kein ende-tag. Damit das ganze funktioniert muss die image-map der grafik verbunden werden.

definition der image-map

<map name="mapname" [ id="mapname" ] >
     <area shape="typ" coords="koordinaten" href="pfadname" [ title="hinweis" ] >
     weitere area-tags
</map>

mapname das map-tag muss mit dem attribut name einen eindeutigen namen erhalten. Das attribut id ist ggf. für CSS notwendig, dabei kann man den gleichen namen verwenden wie im attribut name. Im attribut usemap des img-tags darf das nummernzeichen nicht vergessen werden.
types gibt drei typen des hotspots
    rectrechteck
    circlekreis
    polyvieleck
koordinaten koordinaten des hotspots innerhalb der grafik; die angaben hängen vom typ ab.
hinweis wenn man mit dem cursor einen hotspot berührt, wird hinweis als quickinfo angezeigt.

image-map und grafik verbinden

<img src="pfadname" usemap="#mapname" />

pfadname pfadname der datei, die die grafik enthält
#mapnamename, der im map-tag festgelegt wurde, hier aber mit dem vorangestellten #

angabe der koordinaten
Die koordinaten eines hotspots werden von der linken oberen ecke der grafik (das ist 0, 0) in pixel gemessen und als zahlenpaar angegeben, als erstes der abstand horizontal, als zweites der abstand vertikal. Mit hilfe eines bildbearbeitungsprogrammes können die koordinaten eines hotspots unschwer ermittelt werden. Die einzelnen werte sind durch komma getrennt. Abhängig vom typ des hotspots sind folgende angaben nötig:

rect die koordinaten der linken oberen und der rechten unteren ecke.
circle die koordinaten des mittelpunks und der radius
polydie koordinaten aller eckpunkte

beispiel
In der angezeigten grafik sind der rote luftballon und die mit klick beschrifteten flächen als hotspots definiert.


zum untermenü


    IMPRESSUM  

    KONTAKT  

    PRIVAT  

    D O K U  


  h t m l
  C S S  
  P H P  
  My S Q L  
  JAVASCRIPT